<template>
  <view class="home">
    <view class="home-main">
      <nut-row class="home-banner" :gutter="4">
        <nut-col :span="12" class="home-banner-item" @click="jumpDetail('1')">
          <view :class="['home-main-img-wrap', { succ: succScenes.includes(1) }]">
            <view class="home-main-img scene_1"></view>
          </view>
        </nut-col>

        <nut-col :span="12" class="home-banner-item" @click="jumpDetail('2')">
          <view :class="['home-main-img-wrap', { succ: succScenes.includes(2) }]">
            <view class="home-main-img scene_2"></view>
          </view>
        </nut-col>
      </nut-row>
      <nut-row class="home-banner" :gutter="10">
        <nut-col :span="24" class="home-banner-item" @click="jumpDetail('3')">
          <view :class="['home-main-img-wrap', { succ: succScenes.includes(3) }]">
            <view class="home-main-img scene_3"></view>
          </view>
        </nut-col>
      </nut-row>
      <view class="home-opp"> 剩余{{ oppCount }}次排查机会 </view>

      <view class="home-time">
        点击进入相应场景，寻找消防隐患后即可获得消防徽章碎片。集齐<view class="num">3</view>个消防徽章碎片即可参与抽奖
      </view>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { ref, onMounted } from 'vue';
import { getDate, sum } from '../../utils'

const sceneLen = 3
const oppCount = ref(sceneLen)
const oppArray = ref([1, 1, 1])
const succScenes = ref([])
const dateNow = getDate()
import { sceneStateKey, oppStateKey } from '../../constants'

onMounted(async () => {
  const st = await Taro.getStorageSync(`${sceneStateKey}_${dateNow}`)
  succScenes.value = st?.succScenes ?? []
  const opp = await Taro.getStorageSync(`${oppStateKey}_${dateNow}`)
  if (Array.isArray(opp)) {
    oppArray.value = opp
    oppCount.value = sum(opp)
  }
})

async function jumpDetail(scene) {
  if (oppCount.value > 0) {
    oppArray.value = oppArray.value.map((it, i) => i === (scene - 1) ? 0 : it)
    oppCount.value = sum(oppArray.value)
    await Taro.setStorageSync(`${oppStateKey}_${dateNow}`, oppArray.value)
    Taro.navigateTo({
      url: `/pages/detail/index?scene=${scene}`,
    });
  } else {
    Taro.showToast({
      title: '您今天的机会用光了，请明天再来',
      icon: 'none',
      duration: 2000
    })
  }
}
</script>

<style lang="scss">
.home {
  padding-top: 50px;
  position: relative;
  width: 100vw;
  height: 750px;
  box-sizing: border-box;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/award_img_bg.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}

.home-bg img {
  width: 100%;
  height: 100%;
}

.home-banner {
  box-sizing: border-box;
}

.home-main {
  z-index: 1;
}

.home-opp {
  color: #6b6b6b;
  font-size: 14px;
  text-align: center;
}

.home-time {
  box-sizing: border-box;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/index_img_time.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 10px 30px;
  font-size: 13px;
  color: #fff;
  line-height: 1.2;
  height: 45px;
  padding: 4px 10px;
}

.home-time .num {
  width: 14px;
  height: 14px;
  line-height: 14px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  color: #cf2329;
  border-radius: 50%;
  background: #ecc114;
}

.home-banner {
  padding: 2px 10px;
}

.home-banner-item {
  overflow: hidden;
}

.home-main-img-wrap {
  padding: 2px;
  border: 2px solid #cf2329;
  background-color: #fff;
  position: relative;
}

.home-main-img-wrap::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5)
}

.home-main-img-wrap.succ::before {
  background-color: rgba(0, 0, 0, 0)
}

.home-main-img {
  box-shadow: 2px 2px 2px #ecc114;
  width: 100%;
  height: 100%;
  height: 250px;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
}

.home-main-img.scene_1 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/scene_1.jpg");
}

.home-main-img.scene_2 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/scene_2.jpg");
}

.home-main-img.scene_3 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/scene_3.jpg");
}
</style>